<template>
    <!-- <div class="button">
          <el-button type="primary" @click="handleEdit(row)">
              修改信息<el-icon class="el-icon--edit">
                  <Edit />
              </el-icon>
          </el-button>

          <el-button type="success" @click="handleSave(row)">
              保存修改<el-icon class="el-icon--save">
                  <Check />
              </el-icon>
          </el-button>
          <el-button> 清空 </el-button>
      </div> -->
    <div>
        <el-table :data="tableData" style="width: 110%" border class="mt-4" size="large" stripe>
            <el-table-column prop="date" label="年份" min-width="90"></el-table-column>
            <el-table-column prop="" label="销售收入" min-width="90">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.name }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.name"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="总资产">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.address }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.address"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="净资产">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.value }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.value"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="净利润">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.netProfit }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.netProfit"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="净利润率" min-width="90">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.netProfitRate }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.netProfitRate"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="总负债">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.grossLiabilities }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.grossLiabilities"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="研发费用" min-width="90">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.researchAndDevelopment }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.researchAndDevelopment"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="研发费用占比" min-width="90">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.proportionOfExpenses }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.proportionOfExpenses"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="纳税额">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.ratal }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.ratal"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="资产负债率" min-width="90">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.lev }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.lev"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="银行贷款" min-width="90">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.bankLoan }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.bankLoan"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="" label="出口额">
                <template #default="scope">
                    <span v-show="!scope.row.editing">{{ scope.row.exports }} </span>
                    <el-input v-show="scope.row.editing" v-model="scope.row.exports"></el-input>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessageBox, ElNotification } from 'element-plus'

import { defineEmits, onMounted, defineExpose } from 'vue';
const emits = defineEmits(['updateEvent']);

const updateData = () => {
    emits('updateEvent', tableData.value);
}

const props = defineProps(['data'])
defineExpose({
    updateData
})
watch(() => props.data, (newValue, oldValue) => {
    if (!(newValue == undefined || newValue == '')) {
        let b = props.data.replace(/\\(.)/g, '$1')
        b = b.slice(1, -1)
        let a = JSON.parse(b)
        tableData.value = a
        handleEdit()
    }
})


onMounted(() => {
})

const tableData = ref([
    {
        date: '2021年',
        netProfit: '',
        netProfitRate: '',
        grossLiabilities: '',
        researchAndDevelopment: '',
        proportionOfExpenses: '',
        ratal: '',
        lev: '',
        bankLoan: '',
        exports: '',
        name: '',
        address: '',
        value: '',
        editing: false
    },
    {
        date: '2022年',
        netProfit: '',
        netProfitRate: '',
        grossLiabilities: '',
        researchAndDevelopment: '',
        proportionOfExpenses: '',
        ratal: '',
        lev: '',
        bankLoan: '',
        exports: '',
        name: '',
        address: '',
        value: '',
        editing: false
    },
    {
        date: '2023年',
        netProfit: '',
        netProfitRate: '',
        grossLiabilities: '',
        researchAndDevelopment: '',
        proportionOfExpenses: '',
        ratal: '',
        lev: '',
        bankLoan: '',
        exports: '',
        name: '',
        address: '',
        value: '',
        editing: false
    },
    {
        date: '增长率%',
        netProfit: '',
        netProfitRate: '',
        grossLiabilities: '',
        researchAndDevelopment: '',
        proportionOfExpenses: '',
        ratal: '',
        lev: '',
        bankLoan: '',
        exports: '',
        name: '',
        address: '',
        value: '',
        editing: false
    }
])

const handleEdit = () => {
    tableData.value.forEach((item) => {
        if (item.date === '增长率%') {
            item.editing = false
        } else {
            item.editing = true
        }
    })
}

</script>

<style scoped>
.p-10,
.button {
    width: 50%;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 20px;
    border-top: '1px solid #007bff';
    border-bottom: '1px solid #007bff';
}
</style>
